import React, { ReactNode, createElement, cloneElement } from "react";
import clsx from "clsx";
import styled from "styled-components";
import styles from "./style.module.css";
type CardProps = {
  src?: string;
  className?: string;
  icon?: any;
  title?: string;
  children?: ReactNode;
  data?: any;
  childlayout?: "justify-around" | "justify-between" | "justify-start";
};

const CardContainer = styled.div`
  background: #ffffff;
  box-shadow: 0 4px 20px 0 rgba(218, 218, 218, 0.6);
  border-radius: 12px;
  border-radius: 12px;
  padding: 12px;
  margin: 0 12px;
`;

const Card = ({
  src,
  icon,
  title,
  children,
  className,
  data,
  childlayout = "justify-around",
}: CardProps) => {
  const iconImg =
    src && typeof src === "string" ? (
      <img src={src} alt="" />
    ) : (
      icon && createElement(icon as any, { className: styles.icon })
    );

  let renderChildren: any = null;
  if (data && Array.isArray(children)) {
    renderChildren = children.map((it) =>
      cloneElement(it, { ...data[it.key] })
    );
  } else {
    renderChildren = children;
  }

  return (
    <CardContainer className={className}>
      <div className="flex gap-x-[8px] items-center mb-[12px]">
        {iconImg && <span>{iconImg}</span>}
        {title && <span className="title">{title}</span>}
      </div>
      <div className={clsx("flex flex-wrap py-2 gap-y-[12px]", childlayout)}>
        {renderChildren}
      </div>
    </CardContainer>
  );
};

export default Card;
